<template>
	<view class="toolbar">
		<view class="title">
			<slot name="title">
				<view>{{tableTitle}}</view>
			</slot>
		</view>
		<view class="right">
			<slot>
				<!-- #ifdef H5 -->
				<download-excel style="margin-right: 10px;" v-bind="exportExcel" :data="exportExcelData">
					<el-button icon="Paperclip" type="primary">导出数据</el-button>
				</download-excel>
				<el-button @click="clickPrint" icon="Printer" type="primary">打印</el-button>
				<!-- #endif -->
			</slot>
		</view>
	</view>
</template>

<script>
	import "./jquery3.4.1.min.js"
	import "./jQuery.print.min.js"
	import {
		inject
	} from 'vue'
	export default {
		name: "toolbar",
		props: {
			tableTitle: "",

			// exportExcel: {
			// 	"filename": "uni-id-users.xls",
			// 	"type": "xls",
			// 	"fields": {
			// 		"用户名": "username",
			// 		"手机号码": "mobile",
			// 		"用户状态": "status",
			// 		"邮箱": "email",
			// 		"角色": "role",
			// 		"last_login_date": "last_login_date"
			// 	}
			// },
			// exportExcelData: [],
			exportExcelData: {
				type: Array,
				required: false,
				default: null,
			},
			exportExcel: {
				type: Object,
				default () {
					return []
				}
			},
			showAction: true,
		},
		data() {
			return {
			};
		},
		methods: {
			clickPrint() {
				// window.print();
				// #ifdef H5
				// var height = $('#dataTable').height();
				// $('#dataTable').height
				
				$("#dataTable").print({
					addGlobalStyles: true,
					stylesheet: null,
					rejectWindow: true,
					noPrintSelector: "#actionColumn",
					iframe: true,
					//Add this on top
					prepend: "Hello World!!!<br/>",
					//Add this on bottom
					append: "<span><br/>Buh Bye!</span>",
					//Log to console when printing is done via a deffered callback
					deferred: $.Deferred().done(function() {
						console.log('Printing done', arguments);
					})
				});
				$('#action-column').show();
				// #endif
				
			}
		}
	}
</script>

<style lang="scss">
	.toolbar {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 5px 0px;

		.title {
			width: 50%;
		}

		.right {
			width: 50%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}

	}
</style>